<template>
  <!-- 浮动控制面板 -->
  <div class="control-panel">
    <div class="panel-container panel-expanded">
      <!-- 展开/隐藏按钮 -->
      <div class="panel-header">
        <div class="flex items-center">
          <h3 class="panel-title">漫游控制</h3>
          <el-switch size="small" v-model="isFixedRoute" />
        </div>
        <div @click="close">X</div>
      </div>

      <!-- 面板内容 -->
      <div class="panel-content">
        <div class="button-grid">
          <button @click="drawLine" class="control-btn bg-#3385ff">
            绘制路线
          </button>
          <button @click="clearLine" :disabled="clearLineDisabled" class="control-btn bg-red">
            清除路线
          </button>
          <button @click="start" :disabled="disabled" class="control-btn start-btn">
            开始漫游
          </button>
          <button @click="pause" :disabled="disabled" class="control-btn pause-btn">
            暂停漫游
          </button>
          <button @click="proceed" :disabled="disabled" class="control-btn start-btn">
            继续漫游
          </button>
          <button @click="stop" :disabled="disabled" class="control-btn pause-btn">
            停止漫游
          </button>
        </div>
        <div class="mt-10px flex items-center">
          <div class="relative group w-[100px]">
            <button class="control-btn bg-#3385ff">标绘</button>
            <div
              class="absolute left-0 mt-[8px] px-8px text-#fff rounded-[6px] bg-#003137cc focus:outline-none transition-all duration-200 ease-out transform opacity-0 scale-95 invisible group-hover:visible group-hover:opacity-100 group-hover:scale-100 z-10">
              <div class="py-[4px] hover:text-#3385ff cursor-pointer" v-for="i in PLOTTING" :key="i.icon"
                @click="handleSelect(i)"> {{ i.label }} </div>
            </div>
          </div>
          <button class="control-btn bg-red ml-[-40px]" @click="handelClearPlotting">清除标绘</button>
          <div class="flex text-12px text-#fff items-center ml-8px">
            漫游倍速：
            <button @click="changeMultiplier(1)" class="control-btn bg-#3385ff">x1</button>
            <button @click="changeMultiplier(2)" class="control-btn bg-#3385ff mx-6px">x2</button>
            <button @click="changeMultiplier(3)" class="control-btn bg-#3385ff">x3</button>
          </div>
        </div>

      </div>
    </div>
  </div>
  <img class="absolute top-0 left-0 w-full h-full" v-if="showImg" src="@/assets/img/fixedRoute/jssj.png" />
</template>

<script setup lang="ts">
import { useBoolean } from "@/store";
import { ROAM_LINE, PLOTTING } from "@/const/home";
import { getAssets } from "@/utils";
let fixedRoute: any, graphicLayer, lineLayer;

const booleanStore = useBoolean();
const disabled = ref(true);
const clearLineDisabled = ref(false);
const isPause = ref(false);
const isFixedRoute = ref(true); //是否固定路线
const showImg = ref(false);

onMounted(async () => {
  const { map3d } = window.cesiumInit;
  graphicLayer = new window.mars3d.layer.GraphicLayer();
  map3d.addLayer(graphicLayer);


  graphicLayer.bindContextMenu([
    {
      text: '删除对象',
      icon: 'fa fa-trash-o',
      callback: function (e) {
        let graphic = e.graphic
        if (graphic) {
          graphicLayer.removeGraphic(graphic);
          map3d.camera.zoomOut(1);
        }
      },
    }
  ])
});

const drawLine = async () => {
  handelClearPlotting(); //清除标绘
  if (lineLayer) {
    clearLine();
  };
  lineLayer = await graphicLayer.startDraw({
    type: "polyline",
    style: {
      color: "#ffff00",
      width: 3,
      clampToGround: true,
      classificationType: window.Cesium.ClassificationType.CESIUM_3D_TILE,
    },
  });

  const positions = lineLayer.toJSON().positions;
  console.log(positions);
  addRoamLine(isFixedRoute.value ? ROAM_LINE : positions);
};

const clearLine = () => {
  graphicLayer.removeGraphic(lineLayer);
  lineLayer = null;
  disabled.value = true;
  clearLineDisabled.value = false;
};

const start = async () => {
  changeClusterLayer(false);
  fixedRoute.setCameraOptions({
    type: "dy",
  });
  fixedRoute.start();
  showImg.value = true;
  clearLineDisabled.value = true;
  booleanStore.setTopFooter(false);
};

const pause = () => {
  changeClusterLayer(false);
  fixedRoute.setCameraOptions({
    type: "gs",
  });
  isPause.value = true;
  showImg.value = false;
  fixedRoute.pause();
};

const proceed = () => {
  changeClusterLayer(false);
  fixedRoute.setCameraOptions({
    type: "dy",
  });
  isPause.value = false;
  showImg.value = true;
  fixedRoute.proceed();
};

const stop = () => {
  changeMultiplier(1);
  changeClusterLayer(true);
  fixedRoute && fixedRoute.stop();
  clearLineDisabled.value = false;
  showImg.value = false;
  booleanStore.setTopFooter(true);
};

const close = () => {
  clearLine();
  handelClearPlotting();
  stop();
  booleanStore.setFixedRoute(false);
};

const addRoamLine = (positions) => {
  // 该数据可以从 基础项目 飞行漫游功能界面操作后单个路线的 保存JSON
  fixedRoute = new window.mars3d.graphic.FixedRoute({
    name: "贴模型表面漫游",
    position: {
      type: "time", // 时序动态坐标
      speed: 10,
      list: positions,
    },
    camera: {
      type: "dy",
      offsetZ: 3,
    },
  });
  graphicLayer.addGraphic(fixedRoute);

  fixedRoute.on(window.mars3d.EventType.end, () => stop());

  fixedRoute.autoSurfaceHeight({ has3dtiles: true, splitNum: 10 }).then(() => {
    fixedRoute = fixedRoute;
  });

  disabled.value = false;
};

const changeClusterLayer = (val) => {
  const { primitiveLoader } = window.cesiumInit;
  primitiveLoader.clusterLayer && (primitiveLoader.clusterLayer.show = val);
  lineLayer && (lineLayer.show = val);
  // draw.drawLayer && (draw.drawLayer.show = val);
};

const handleSelect = async (item) => {
  const image = getAssets(item.icon)
  await graphicLayer.startDraw({
    type: "billboardP",
    name: "plotting",
    style: {
      image: image,
      width: 40,
      height: 40,
      scaleByDistance: true,
      horizontalOrigin: window.Cesium.HorizontalOrigin.CENTER,
      verticalOrigin: window.Cesium.VerticalOrigin.BOTTOM,
      visibleDepth: false,
      label: {
        text: item.label,
        font_size: 18,
        color: "yellow",
        outline: true,
        visibleDepth: false,
        outlineColor: "#000",
        pixelOffsetY: -50
      }
    }
  })
}

const handelClearPlotting = () => {
  const arr = graphicLayer.getGraphicsByAttr('plotting', 'name')
  arr.length > 0 && arr.map(item => {
    graphicLayer.removeGraphic(item);
  });
}

const multiplier = 2;
const changeMultiplier = (val) => {
  const { map3d } = window.cesiumInit;
  map3d.clock.multiplier = multiplier * val;
}
</script>

<style lang="less" scoped>
.control-panel {
  position: fixed;
  top: 130px;
  right: 24px;
  z-index: 50;
}

.panel-container {
  background-color: #003137cc;
  border-radius: 8px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  transition: all 0.3s;
}

.panel-expanded {
  width: 330px;
  padding: 16px;
}

.panel-collapsed {
  width: 50px;
  height: 50px;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  color: #fff;
}

.panel-title {
  font-size: 14px;
  font-weight: 600;
}

.panel-content {
  margin-top: 10px;
}

.button-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.control-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 6px;
  transition: all 0.2s;
  color: white;
  font-size: 12px;
  font-weight: 500;
  border: none;
  cursor: pointer;
}

.control-btn:disabled {
  background-color: #d1d5db;
  cursor: not-allowed;
}

.control-btn:not(:disabled):hover {
  transform: translateY(-2px);
}

.start-btn {
  background-color: #10b981;
}

.start-btn:not(:disabled):hover {
  background-color: #059669;
}

.pause-btn {
  background-color: #f59e0b;
}

.pause-btn:not(:disabled):hover {
  background-color: #d97706;
}

.resume-btn {
  background-color: #3b82f6;
}

.resume-btn:not(:disabled):hover {
  background-color: #2563eb;
}

.stop-btn {
  background-color: #ef4444;
}

.stop-btn:not(:disabled):hover {
  background-color: #dc2626;
}

/* SVG图标样式 */
.icon {
  width: 14px;
  height: 14px;
  display: inline-block;
}
</style>
